<template>
  <div id="spu-list">
    <div class="containner">
      <div class="py-10 px-20 box-shadow rounded text-md">
        <div class="spu-filter-row flex item-start my-10">
          <div class="spu-filter-name gray text-right">商品分类：</div>
          <div class="spu-filter-group flex item-center wrap">
            <div class="spu-filter-item ml-10 gray hand">全部</div>
            <div class="spu-filter-item ml-20 gray hand active"> {{product.spulist_filter_cate.cate_name}} </div>
          </div>
        </div>
        <!-- 遍历商品属性键 -->
        <div v-for="(attr,index) in  product.spu_attr_list" :key="attr.key_id"
          class="spu-filter-row flex item-start my-10">
          <div class="spu-filter-name gray text-right">{{attr.key_name}}：</div>
          <div class="spu-filter-group flex item-center wrap">
            <div class="spu-filter-item ml-10 gray hand active">全部</div>
            <!-- 遍历商品属性值 -->
            <div @click="attr_value_clicked(index,val.id)" v-for="val in attr.spuAttrValueList" :key="val.id"
              class="spu-filter-item ml-20 gray hand">
              {{val.value_name}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="containner mt-20 flex wrap item-start">
      <div>
        <spu v-for="spu in product.spu_filter_list" :key="spu.spu_id" :spu="spu" @click.native="spu_clicked(spu)"></spu>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapActions,
    mapMutations
  } from 'vuex'

  import Spu from '../components/Spu.vue'

  export default {
    components: {
      'spu': Spu
    },
    computed: {
      ...mapState(['product'])
    },
    methods: {
      ...mapActions('product', ['get_spu_attr_list', 'get_spu_filter_list']),
      ...mapMutations('product', ['set_spu_attr_value_list']),
      //点击筛选属性值
      attr_value_clicked(index, value_id) {
        let arr = this.product.spu_attr_value_list;
        arr[index] = value_id;
        this.set_spu_attr_value_list(arr);
        //根据选择的属性值重现获取数据
        this.get_spu_filter_list();
      }
    },
    mounted() {
      //筛选属性
      if (this.product.spulist_filter_cate != null) {
        this.get_spu_attr_list();
      }
      //筛选商品
      this.get_spu_filter_list();
    }
  }
</script>

<style scoped>
  @import '../assets/css/spulist.css'
</style>
